<script setup lang="ts">
import "vue3-auto-scroll/dist/style.css";

const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  }
})

</script>

<template>
  <div class="ml-[39px] mr-[47px] mt-[20px]">
    <div class="flex justify-center">
      <div class="w-[266px] h-[71px] bg flex items-center">
        <img src="@/assets/img/icon/ic_zfl.png" class="w-[32px] h-[32px] ml-[17px]">
        <div class="text-[#1A1A1A] text-[20px] ml-[8px]">脂肪量</div>
        <div class="text-[#808080] text-[18px] font-medium ml-[24px]"><span class="text-[#FB2D19] text-[32px] ff-DINAlternate-Bold">{{ (data.weight * (data.fp / 100)).toFixed(1) }}</span>kg</div>
      </div>
    </div>
    <div class="mt-[15px]">
      <div class="flex items-center justify-between text-[#1A1A1A] text-[18px] font-medium w-[452px] h-[56px] border">
        <div class="flex-[2] text-center">项目</div>
        <div class="flex-[3] pl-[50px] box-border">结果</div>
        <div class="flex-[2] text-center">参考范围</div>
      </div>
      <div class="flex items-center justify-between text-[#4D4D4D] text-[18px] w-[452px] h-[56px]">
        <div class="flex-[2] text-center text-[16px]">体脂肪率</div>
        <div class="flex-[3] pl-[50px] box-border flex items-center text-[18px] font-medium"><span class="ff-DINAlternate-Bold">{{ data.fp }}</span>%
<!--          <span class="text-[#FB2D19] font-bold" v-if="data.fp > data.fp_normal?.[1]">↑</span>-->
<!--          <span class="text-[#3786FD] font-bold" v-if="data.fp < data.fp_normal?.[0]">↓</span>-->
          <img class="w-[6px] h-[12px] ml-[5px]" src="@/assets/img/icon/ic_shangjiantou.png" v-if="data.fp > data.fp_normal?.[1]">
          <img class="w-[6px] h-[12px] ml-[5px]" src="@/assets/img/icon/ic_xiajiantou.png" v-if="data.fp < data.fp_normal?.[0]">
        </div>
        <div class="flex-[2] text-center text-[18px] font-medium ff-DINAlternate-Bold">{{ data.fp_normal?.[0] }}～{{ data.fp_normal?.[1] }}</div>
      </div>
      <div class="flex items-center justify-between text-[#4D4D4D] text-[18px] w-[452px] h-[56px] border">
        <div class="flex-[2] text-center text-[16px]">体水分率</div>
        <div class="flex-[3] pl-[50px] box-border flex items-center text-[18px] font-medium"><span class="ff-DINAlternate-Bold">{{ data.tbwc }}</span>%
<!--          <span class="text-[#FB2D19] font-bold" v-if="data.tbwc > data.tbwc_normal?.[1]">↑</span>-->
<!--          <span class="text-[#3786FD] font-bold" v-if="data.tbwc < data.tbwc_normal?.[0]">↓</span>-->
          <img class="w-[6px] h-[12px] ml-[5px]" src="@/assets/img/icon/ic_shangjiantou.png" v-if="data.tbwc > data.tbwc_normal?.[1]">
          <img class="w-[6px] h-[12px] ml-[5px]" src="@/assets/img/icon/ic_xiajiantou.png" v-if="data.tbwc < data.tbwc_normal?.[0]">
        </div>
        <div class="flex-[2] text-center text-[18px] font-medium ff-DINAlternate-Bold">{{ data.tbwc_normal?.[0] }}～{{ data.tbwc_normal?.[1] }}</div>
      </div>
      <div class="flex items-center justify-between text-[#4D4D4D] text-[18px] w-[452px] h-[56px]">
        <div class="flex-[2] text-center text-[16px]">体骨骼量</div>
        <div class="flex-[3] pl-[50px] box-border flex items-center text-[18px] font-medium"><span class="ff-DINAlternate-Bold">{{ data.sm }}</span>kg
<!--          <span class="text-[#FB2D19] font-bold" v-if="data.sm > data.sm_normal?.[1]">↑</span>-->
<!--          <span class="text-[#3786FD] font-bold" v-if="data.sm < data.sm_normal?.[0]">↓</span>-->
          <img class="w-[6px] h-[12px] ml-[5px]" src="@/assets/img/icon/ic_shangjiantou.png" v-if="data.sm > data.sm_normal?.[1]">
          <img class="w-[6px] h-[12px] ml-[5px]" src="@/assets/img/icon/ic_xiajiantou.png" v-if="data.sm < data.sm_normal?.[0]">
        </div>
        <div class="flex-[2] text-center text-[18px] font-medium ff-DINAlternate-Bold">{{ data.sm_normal?.[0] }}～{{ data.sm_normal?.[1] }}</div>
      </div>
      <div class="flex items-center justify-between text-[#4D4D4D] text-[18px] w-[452px] h-[56px] border">
        <div class="flex-[2] text-center text-[16px]">肌肉率</div>
        <div class="flex-[3] pl-[50px] box-border flex items-center text-[18px] font-medium"><span class="ff-DINAlternate-Bold">{{ ((data.mm / data.weight) * 100).toFixed(1) }}</span>%
<!--          <span class="text-[#FB2D19] font-bold" v-if="data.mm > data.mm_normal?.[1]">↑</span>-->
<!--          <span class="text-[#3786FD] font-bold" v-if="data.mm < data.mm_normal?.[0]">↓</span>-->
          <img class="w-[6px] h-[12px] ml-[5px]" src="@/assets/img/icon/ic_shangjiantou.png" v-if="data.mm > data.mm_normal?.[1]">
          <img class="w-[6px] h-[12px] ml-[5px]" src="@/assets/img/icon/ic_xiajiantou.png" v-if="data.mm < data.mm_normal?.[0]">
        </div>
        <div class="flex-[2] text-center text-[18px] font-medium ff-DINAlternate-Bold">{{ ((data.mm_normal?.[0] / data.weight) * 100).toFixed(1) }}～{{ ((data.mm_normal?.[1] / data.weight) * 100).toFixed(1) }}</div>
      </div>
      <div class="flex items-center justify-between text-[#4D4D4D] text-[18px] w-[452px] h-[56px]">
        <div class="flex-[2] text-center text-[16px]">基础代谢</div>
        <div class="flex-[3] pl-[50px] box-border flex items-center text-[18px] font-medium"><span class="ff-DINAlternate-Bold">{{ data.bmr }}</span>Kcal
<!--          <span class="text-[#3786FD] font-bold" v-if="data.bmr < data.bmr_normal?.[0]">↓</span>-->
<!--          <img class="w-[6px] h-[12px]" src="@/assets/img/icon/ic_shangjiantou.png" v-if="data.bmi > data.bmi_normal?.[1]">-->
          <img class="w-[6px] h-[12px] ml-[5px]" src="@/assets/img/icon/ic_xiajiantou.png" v-if="data.bmr < data.bmr_normal?.[0]">
        </div>
        <div class="flex-[2] text-center text-[18px] font-medium ff-DINAlternate-Bold">≥{{ data.bmr_normal?.[0] }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bg{
  background: url("@/assets/img/icon/bg_zfl.png") 0 0 / 100% 100% no-repeat;
}

.border{
  box-shadow: inset 0px 0px 11px 1px rgba(255,255,255,0.6);
  border-radius: 8px;
  border: 1px solid #CCCCCC;
}
</style>
